<!--
  @Description: Vconsole 开发调试插件
  @Author:zqy
  @Date:2023-04-15 15:40:06
  @Last Modified by:zqy
  @Last Modified time:2023-06-15 15:40:06
-->
<template>
  <div class="debug-btn" :style="position" @click="debugHandle"></div>
</template>

<script lang="ts">
  export interface PositionResult {
    left?: string | number
    top?: string | number
    right?: string | number
    bottom?: string | number
  }
  import Vconsole from 'vconsole'
  import { defineComponent, ref, PropType } from 'vue'
  export default defineComponent({
    name: 'Vconsole',
    props: {
      countHits: {
        type: Number,
        default: 5
      }, // 点击多少次显示、隐藏调试插件
      resetTime: {
        type: Number,
        default: 4000
      }, // 多久后重置计数 (默认4秒内点击5次显示、隐藏调试插件)
      position: {
        type: Object as PropType<PositionResult>,
        default: () => {
          return {
            left: 0,
            bottom: 0
          }
        }
      }
    },
    setup(props) {
      let count = ref<number>(0)
      const debugHandle = () => {
        count.value += 1
        if (count.value >= props.countHits) {
          const __vconsole: any = document.getElementById('__vconsole')
          if (!__vconsole) {
            new Vconsole()
            count.value = 0
            return
          }
          const vconsoleDisplay = __vconsole?.style?.display
          __vconsole.style.display = vconsoleDisplay === 'none' ? 'block' : 'none'
          count.value = 0
          return
        }
        if (count.value === 1) {
          let timer = setTimeout(() => {
            count.value = 0
            clearTimeout(timer)
          }, props.resetTime)
        }
      }
      if (process.env.QMP_EVN !== 'production') {
        const __vconsole: any = document.getElementById('__vconsole')
        if (!__vconsole) {
          new Vconsole()
          count.value = 0
          return
        }
        __vconsole.style.display = 'block'
        count.value = 0
      }
      return {
        debugHandle
      }
    }
  })
</script>

<style lang="less" scoped>
  .debug-btn {
    position: fixed;
    width: 30px;
    height: 30px;
    background-color: transparent;
    z-index: 99999;
  }
</style>
